<template>
  <div class="app-container">
    <div class="list">
      <div class="item" >
        <el-icon><Plus /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Minus /></el-icon>
      </div>
      <div class="item" >
        <el-icon><CirclePlus /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Search /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Female /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Male /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Aim /></el-icon>
      </div>
      <div class="item" >
        <el-icon><House /></el-icon>
      </div>
      <div class="item" >
        <el-icon><FullScreen /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Loading /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Link /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Service /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Pointer /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Star /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Notification /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Connection /></el-icon>
      </div>
      <div class="item" >
        <el-icon><ChatDotRound /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Setting /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Clock /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Position /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Discount /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Odometer /></el-icon>
      </div>
      <div class="item" >
        <el-icon><ChatSquare /></el-icon>
      </div>
      <div class="item" >
        <el-icon><ChatRound /></el-icon>
      </div>
      <div class="item" >
        <el-icon><ChatLineRound /></el-icon>
      </div>
      <div class="item" >
        <el-icon><ChatLineSquare /></el-icon>
      </div>
      <div class="item" >
        <el-icon><ChatDotSquare /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Hide /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Unlock /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Lock /></el-icon>
      </div>
      <div class="item" >
        <el-icon><RefreshRight /></el-icon>
      </div>
      <div class="item" >
        <el-icon><RefreshLeft /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Refresh /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Bell /></el-icon>
      </div>
      <div class="item" >
        <el-icon><MuteNotification /></el-icon>
      </div>
      <div class="item" >
        <el-icon><User /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Check /></el-icon>
      </div>
      <div class="item" >
        <el-icon><CircleCheck /></el-icon>
      </div>
      <div class="item" >
        <el-icon><Warning /></el-icon>
      </div>
      <div class="item" >
        <el-icon><CircleClose /></el-icon>
      </div>
      <div class="item" >
        <el-icon><InfoFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><CircleCheckFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><WarningFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><CircleCloseFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><QuestionFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><WarnTriangleFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><UserFilled /></el-icon>
      </div>
      <div class="item" >
        <el-icon><HomeFilled /></el-icon>
      </div>
    </div>
    <div  class="link" ><el-link style="font-size: 20px" type="danger" href="https://element-plus.org/zh-CN/component/icon.html" target="_blank">点击获取：图标使用方法和更多图标选择!!!</el-link></div>
  </div>
</template>

<script name="Icons" setup>

</script>

<style scoped lang="scss">
  .list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
    .item{
      width: 120px;
      height: 80px;
      border: 1px solid #dedede;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .link{
    text-align: center;
    margin-top: 20px;
  }
</style>